<template>
    <div class="job_list">
        <el-row class="title">
            <el-col :span="23"><div class="grid-content bg-purple"><h1>招聘列表</h1></div></el-col>
        </el-row>
        <el-row class="addJob">
            <el-col :span="23"><div class="grid-content bg-purple">
                <router-link to="/job_add"><el-button type="primary">新增职位</el-button></router-link>
            </div></el-col>
        </el-row>
        <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
            prop="name"
            label="职位名称"
            width="150">
        </el-table-column>
        <el-table-column
            prop="property_string"
            label="标签"
            width="150">
        </el-table-column>
        <el-table-column
            prop="price"
            label="薪资"
            width="150">
        </el-table-column>
        <el-table-column
            prop="education"
            label="学历"
            width="150">
        </el-table-column>
        <el-table-column
            prop="experience"
            label="经验"
            width="150">
        </el-table-column>
        <el-table-column
            prop="people"
            label="人数"
            width="150">
        </el-table-column>
        <el-table-column prop="operating" label="操作" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
            <el-dropdown>
                <el-button type="primary">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native.prevent="turn(scope.$index, tableData)">编辑</el-dropdown-item>
                <el-dropdown-item @click.native.prevent="upData(scope.$index, tableData)">上升</el-dropdown-item>
                <el-dropdown-item @click.native.prevent="downData(scope.$index, tableData)">下降</el-dropdown-item>
                <el-dropdown-item @click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            </template>
        </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                prev-text="<"
                layout="total, prev, pager, next"
                :page-size="50"
                :total="500">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import config from '@/assets/js/config.js'
export default {
    created() {
        this.$require.get(config.jobsList,{
            params: {
                page:this.page
            }
        }).then((res) => {
            console.log(res)
            this.tableData = res.data.data.rows;
        }).catch(function (err) {
            console.log("出错了")
        })
    },
    data() {
        return {
            page:0,
            tableData: []
        }
    },
    methods: {
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        console.log(111,val)
        this.$require.get(config.jobsList,{
            params: {
                page:val-1
            }
        }).then((res) => {
            this.tableData = res.data.data.rows;
        }).catch(function(err) {
            console.log("出错了")
        })
      },
        //删除
        deleteRow(index,rows){
      	 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        	this.del(index,rows);//调用删除接口
            console.log("调用删除函数")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
        del(index,rows){
            console.log(index,rows)
            var idx = rows[index].id;
            console.log(idx)
            this.$submit.post(config.jobsDelete,{
                id:idx
            }).then((res) => {
                console.log("删除成功",res)
                this.$message({
                    type: "success",
                    message: "删除成功！"
                });
                this.$require.get(config.jobsList,{
                    params:{
                        page:this.page
                    }
                }).then((result) => {
                    console.log("删除后数据",result)
                    this.tableData = result.data.data.rows;
                })
            })
        },
        //上升
        upData(index, rows){
            var idx = rows[index].id;
            var order = rows[index].orders;
            console.log("ddd",order)
            this.$submit.post(config.jobsSort,{
                move: 1,
                orders: order
            }).then((res)=>{
                console.log("上升成功");
                console.log(res);
                this.$require.get(config.jobsList,{
                    params:{
                        page:this.page
                    }
                }).then((result)=>{
                    this.$message({
                        type: 'success',
                        message: '上升成功!',
                    });
                    this.tableData = result.data.data.rows;
                })
            })
        },
      //下降
      downData(index, rows){
            var idx = rows[index].id;
            var order = rows[index].orders;
            this.$submit.post(config.jobsSort,{
                move: -1,
                orders: order
            }).then((res)=>{
                console.log("下降成功");
                console.log(res);
                this.$require.get(config.jobsList,{
                    params:{
                        page:this.page
                    }
                }).then((result)=>{
                    this.$message({
                        type: 'success',
                        message: '下降成功!',
                    });
                    this.tableData = result.data.data.rows;
                })
            })
        },
        //跳转修改页面
        turn(index, rows){
            var idx = rows[index].id;
            console.log(999,idx)
            this.$router.push({
                name: 'job_stg',
                query: {
                    id:idx
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .el-dropdown {
        vertical-align: top;
    }
    .el-dropdown + .el-dropdown {
        margin-left: 15px;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .job_list{
        height: 100%;
        overflow: auto;
        padding-top: 20px;
        padding-left: 20px;
        padding-bottom: 20px;
        .title{
            margin-bottom: 20px;
        }
        .page{
            margin-top: 40px;
            text-align: center;
        }
    }
</style>
